<div fxLayout="row wrap" fxLayoutAlign="space-between">
  <div fxFlex="1 1 100%">
    <mat-form-field style="width: 100%; padding-bottom: 1em;" color="primary">
      <input matInput [(ngModel)]="search" placeholder="Search projects" />
    </mat-form-field>
  </div>
  <span *ngIf="author === us.user.Nick || isProjectsPage" align="end" style="margin-left: -100px; margin-top: -3px;" matTooltip="Create new project"
    matTooltipPosition="above">
    <button id="add-project-button" mat-mini-fab (click)="create()" color="accent">
      <mat-icon>add</mat-icon>
    </button>
  </span>
</div>
<div>
  <div *ngFor="let p of projects | FilterPipe: search | slice:this.currentPage * 10:(this.currentPage + 1) * 10" style="margin-top: 1em; margin-bottom: 2em; border-bottom: 1px solid #c5c5c5; padding-bottom: 1em; font-family: 'Roboto Light';">
    <div fxLayout="row">
      <div fxFlex="1 1 90%" style="padding-top: 0em; padding-bottom: 1em;">
        <a style="text-decoration: none;" routerLink="/{{p.Author}}">
          <font class="author-link" size="5">{{p.Author}}</font>
        </a>
        <font size="5" style="color: #757575">/ </font>
        <a routerLink="/{{p.Author}}/{{p.Name}}">
          <font class="author-link" size="5" style="margin-left: -4px;">
            <b>{{p.Name}}</b>
          </font>
        </a>
      </div>
      <app-star-button [project]="p" [showCount]="true"></app-star-button>
    </div>
    <div>
      <div align="start">
        {{p.Description}}
      </div>
    </div>
    <div align="end" style="padding-bottom: 1em; ">
      {{p.Tags}}
    </div>
    <span>
      <div fxLayout="row " fxLayoutAlign="space-between ">
        <div fxFlex="1 1 30% ">
          <span fxFlex="1 1 50% " *ngIf="p.Mode==='go' " style="position: relative; padding-right: 75px; top: 5px; ">
            <i style="color: #4DD0E1; " class="cbp-ig-icon devicon-go-plain "></i> Go
          </span>
          <span fxFlex="1 1 50 " *ngIf="p.Mode==='nodejs' " style="position: relative; padding-right: 40px; top: 5px; ">
            <i style="color: #80bd01; " class="cbp-ig-icon devicon-nodejs-plain "></i> NodeJS
          </span>
          <span fxFlex="1 1 50 " *ngIf="p.Mode==='typescript' " style="position: relative; padding-right: 40px; top: 5px; ">
            <i style="color: #0074c1; " class="cbp-ig-icon devicon-typescript-plain "></i> TypeScript
          </span>
        </div>
        <div fxFlex="1 1 70% " align="end " style="margin-top: 5px; ">
          Updated {{p.UpdatedAt | amTimeAgo}}
        </div>
      </div>
    </span>
  </div>
  <div *ngIf="author === us.user.Nick && projects.length < 1">
    You have no projects yet. Use this big yellow button to create one &#8599;.
  </div>
  <div *ngIf="author !== us.user.Nick && projects.length < 1">
    This user has no projects yet.
  </div>
  <mat-paginator *ngIf="projects.length> 10" style="margin-top: 1em;" [length]="projects | FilterPipe: search | length" [pageSize]="10"
    [pageSizeOptions]="[10]" (page)="pageChanged($event)">
  </mat-paginator>
</div>